import QtQuick 1.1
import com.meego 1.0
import "Component"
import "CommomUtil.js" as Util
import "Modulelib.js" as ModuleUtil

Page {
    id: modulepiclist_page

    tools: toolbar_container

    orientationLock : PageOrientation.LockPortrait

    property int fontSize: 16

    property int pageSize: 12

    property int currentPage: 1

    property int totalPage: 1

    property int totalNum: 0

    property int imgType: 1

    property int menuWidth: 480

    property string imgTypesUrl: ModuleUtil.getModulePicTypeUrl()

    ColorAnimation { from: "black"; to: "black"; duration: 200 }

    TitleBar{
        id: modulepiclist_title
        anchors.top: modulepiclist_page.top; anchors.left: modulepiclist_page.left
        width: modulepiclist_page.width; height: 71
        titleName: ModuleUtil.pic_type === 0 ? ModuleUtil.current_vehicle_name : ModuleUtil.current_series_name
        fontSize: modulepiclist_page.fontSize
    }

    ModuleImgTypesMenuModel{
        id: imgTypesMenuModel
    }

    //菜单
    Rectangle {
        id: imgTypesMenu_rect
        width: parent.width; height: 100
        anchors.top: modulepiclist_title.bottom
        anchors.horizontalCenter: modulepiclist_title.horizontalCenter
        color: "#000"
        z:10
        ButtonRow {
            id: menu_listview
            anchors.centerIn: parent
            width: parent.width; height: 60
            platformStyle: CustomButtonStyle{
                buttonHeight: 60
                fontPixelSize: 20
            }

            Repeater{
            model: imgTypesMenuModel
            delegate: Button{
                text: typeName
                onClicked: {
                    modulepiclist_page.currentPage = 1;
                    modulepiclist_page.imgType = typeId
                    modulepiclist_page.getModulepiclistData(1);
                }
            }
            }
        }
    }

    Rectangle{
        id: modulepiclist_rect
        width: parent.width; height: 659
        anchors.top: imgTypesMenu_rect.bottom
        anchors.horizontalCenter: modulepiclist_title.horizontalCenter
        color: "#000"
        Column{
            Item{
                width: parent.width; height: 60
            }

        Row{
            Item {
                width:10; height: 569
            }
            Grid{
            id: modulepiclist_grid
            columns: 3
            spacing: 15
            Repeater{
                model: modulepiclist_data

                delegate: ModulePicItem{
                    picTitle: imgTitle
                    smallPicPath: smallImgPath
                    bigPicPath: bigImgPath
                    picIndex: index;
                }
            }
        }
            Item {
                width:10; height: 569
            }
        }
        Item{
            width: parent.width; height: 30
        }
        }
}


    ListModel{
        id: modulepiclist_data
    }

    BusyLoading{
        id: loading
        anchors.centerIn: parent
        visible:false
    }

    Component.onCompleted: {
        loading.loading();
        modulepiclist_page.getModulepiclistData(1);
    }

    ToolBarLayout{
        id: toolbar_container
        width: modulepiclist_page.width; height: 73

        //返回
        ToolIcon {
            id: back_bt
            iconId: "toolbar-back"
            width: toolbar_container.width / 6; height: toolbar_container.height
            anchors.left: parent.left; anchors.bottom: toolbar_container.bottom
            platformStyle: toolBar_style
            onClicked: {Util.back();}
        }

        //上一页
        ToolButton{
            id: prepage_bt
            text: "上一页"
            font { family: "Helvetica"; pointSize: 16; bold: true }
            width: toolbar_container.width * 5 / 18; height: toolbar_container.height
            anchors.left: back_bt.right; anchors.bottom: toolbar_container.bottom
            platformStyle: toolBar_style
            onClicked: {prePage();}
        }

        //页码
        Text{
            id: page_text
            width: toolbar_container.width * 5 / 18; height: toolbar_container.height
            anchors.left: prepage_bt.right; anchors.bottom: toolbar_container.bottom
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            text: modulepiclist_page.currentPage + " / " + modulepiclist_page.totalPage
            font{bold: true; pointSize: 14}
            color: "#abb2b3"
        }

        //下一页
        ToolButton{
            id: nextpage_bt
            text: "下一页"
            font { family: "Helvetica"; pointSize: 16; bold: true }
            width: toolbar_container.width * 5 / 18; height: toolbar_container.height
            anchors.left: page_text.right; anchors.bottom: toolbar_container.bottom
            platformStyle: toolBar_style
            onClicked: {nextPage();}
        }

        ToolButtonStyle{
            id: toolBar_style
            backgroundVisible: false
            pressedBackground: "image://theme/meegotouch-button-navigationbar-button" + __invertedString + "-background-pressed"
        }
    }

    function getModulepiclistData(currentPage){
        Util.getXmlStringByUrl(ModuleUtil.getModulepiclistUrl(imgType, currentPage, pageSize), modulepiclistCallback);
    }

    function modulepiclistCallback(responseXml){
        if(modulepiclist_data.count > 0) {
            modulepiclist_data.clear();
        }
        if(responseXml !== null){
            var a = responseXml.documentElement;
            var photoCount = a.childNodes[0].childNodes.length;
            var imgNum = a.childNodes[0].childNodes[1].childNodes[0].nodeValue;
            if(imgNum === 0) {
                modulepiclist_page.totalPage = 1;
            } else {
                modulepiclist_page.totalNum = imgNum;
                console.log("pic total number:"+imgNum);
                modulepiclist_page.totalPage = imgNum / modulepiclist_page.pageSize + (imgNum % modulepiclist_page.pageSize > 0 ? 1 : 0);
                console.log("pic total page:"+modulepiclist_page.totalPage);
            }
            if(photoCount > 0) {
                for(var i = 0; i < photoCount; i++) {
                    var nodeName = a.childNodes[0].childNodes[i].nodeName;
                    if(nodeName === "Photo"){
                        var title = a.childNodes[0].childNodes[i].childNodes[1].childNodes[0].nodeValue;
                        var smallImg = a.childNodes[0].childNodes[i].childNodes[3].childNodes[0].nodeValue;
                        var bigImg = a.childNodes[0].childNodes[i].childNodes[5].childNodes[0].nodeValue;
                        modulepiclist_data.append({"imgTitle":title,"smallImgPath":smallImg,"bigImgPath":bigImg});
                    }
                }
            }
        }
        loading.finish();
    }

    function prePage(){
        if(modulepiclist_page.currentPage > 1){
            modulepiclist_page.currentPage = modulepiclist_page.currentPage - 1;
            getModulepiclistData(modulepiclist_page.currentPage);
        }
    }

    function nextPage(){
        if(modulepiclist_page.currentPage < modulepiclist_page.totalPage){
            modulepiclist_page.currentPage = modulepiclist_page.currentPage + 1;
            getModulepiclistData(modulepiclist_page.currentPage);
        }
    }
}
